<template>
  <div class="login">
    <div class="g-polygon-1 div"></div>
    <div class="g-polygon-2 div"></div>
    <div class="g-polygon-3 div"></div>
    <div class="g-polygon-4 div"></div>
    <div class="g-polygon-5 div"></div>

    <div class="switch-theme">
      <el-button
        circle
        icon="Moon"
        @click="
          (e) =>
            configStore.setConfig(
              THEME_KEY,
              !isDark ? DARK_THEME : LIGHT_THEME,
              e,
            )
        "
      />
    </div>

    <div class="login-main">
      <div class="login-svg flex">
        <icon
          name="login"
          :type="ICON_TYPE.SVG"
          :style="{ width: '300px', height: '300px' }"
        />
      </div>

      <div class="login-form">
        <div class="login-form-header flex">
          <icon name="logo" size="35" :type="ICON_TYPE.SVG" follow-theme />
          <h2>Vue3 Admin</h2>
        </div>
        <el-tabs>
          <el-tab-pane label="账号登录" lazy>
            <account-form />
          </el-tab-pane>
          <el-tab-pane label="手机号登录" lazy>
            <phone-form />
          </el-tab-pane>
        </el-tabs>
        <div class="create-account flex">
          <span>还没账号？</span>
          <el-link
            type="primary"
            :underline="false"
            @click="$router.push('/register')"
            >点击创建新账号</el-link
          >
        </div>
        <el-divider>其他登录方式</el-divider>
        <el-space :size="20">
          <icon
            name="weixin"
            color="#07c160"
            size="26"
            :type="ICON_TYPE.SVG"
            @click="open({ value: 'weixin' })"
          />
          <icon
            name="alipay"
            color="#0AE"
            size="26"
            :type="ICON_TYPE.SVG"
            @click="open({ value: 'alipay' })"
          />
          <icon
            name="qq"
            size="26"
            :type="ICON_TYPE.SVG"
            @click="open({ value: 'qq' })"
          />
          <icon
            name="weibo"
            size="26"
            :type="ICON_TYPE.SVG"
            @click="open({ value: 'weibo' })"
          />
          <icon
            name="github"
            size="26"
            :type="ICON_TYPE.SVG"
            @click="open({ value: 'github' })"
          />
        </el-space>
      </div>
    </div>

    <qrcode-login-modal v-model="visible" :data="modalData" />
  </div>
</template>

<script setup>
import { ICON_TYPE } from '@/const'
import { THEME_KEY, DARK_THEME, LIGHT_THEME } from '@/const/theme'
import useConfigStore from '@/store/modules/config'
import useModal from '@/hooks/useModal'
import AccountForm from './components/account-form'
import PhoneForm from './components/phone-form'
import QrcodeLoginModal from './components/qrcode-login-modal'

const configStore = useConfigStore()
const { visible, modalData, open } = useModal()

const isDark = computed(() => configStore.isDark)
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixins.scss';

:deep(.el-space) {
  width: 100%;
  justify-content: center;
}

:deep(.el-tabs__header) {
  margin-bottom: $space-medium-s;
}

:deep(.el-input-group__append) {
  padding: 0;
}

.login {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: var(--el-bg-color);
  padding-top: 150px;
  height: calc(100% - 150px);
  overflow: hidden;

  & > .div {
    position: absolute;
    opacity: 0.5;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    backdrop-filter: blur(150px);
    -webkit-backdrop-filter: blur(150px);
  }

  .g-polygon-1 {
    width: 714px;
    height: 390px;
    bottom: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: linear-gradient(#ffee55, #fdee99);
    clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
  }

  .g-polygon-2 {
    width: 1000px;
    height: 450px;
    bottom: 0;
    left: 30%;
    transform: translate(-50%, 0);
    background-color: linear-gradient(-36deg, #e950d1, #f980d9);
    clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
  }

  .g-polygon-3 {
    width: 1000px;
    height: 450px;
    bottom: 0;
    left: 70%;
    transform: translate(-50%, 0);
    background-color: rgb(71, 71, 77);
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  }

  .g-polygon-4 {
    width: 1000px;
    height: 450px;
    top: 0;
    left: 70%;
    transform: translate(-50%, 0);
    background-color: #00dbde;
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  }

  .g-polygon-5 {
    width: 1000px;
    height: 450px;
    top: 0;
    left: 0;
    transform: translate(-50%, 0);
    background-color: #ff00bf;
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
  }

  .switch-theme {
    position: absolute;
    right: $space-small;
    top: $space-small;
    z-index: 9;
  }

  &-main {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    padding: $space-large;
    transform: translate(-50%, -50%);
    background-color: var(--el-bg-color);
    border-radius: 12px;
    box-shadow: var(--el-color-primary-light-9) 0 2px 10px 2px;

    @include responsive-style('desktop') {
      width: calc(100% - $space-large * 2 - 100px);
    }

    @include responsive-style('pad') {
      width: 80%;
    }

    @include responsive-style('phone') {
      display: block;
    }
  }

  &-svg {
    padding-right: $space-large;
    justify-content: center;
    flex-direction: column;

    @include responsive-style('phone') {
      display: none;
    }
  }

  &-form {
    @include responsive-style('desktop') {
      width: 440px;
    }

    @include responsive-style('phone') {
      width: calc(100vw - $space-large * 2);
      height: calc(100vh - $space-large * 2);
      padding: $space-large;
    }

    margin: auto;

    &-header {
      margin-bottom: $space-small;

      h2 {
        margin-left: $space-small-s;
      }
    }

    .create-account {
      font-size: $font-size-medium;
      margin-bottom: calc($space-large + $space-medium-s);
    }
  }
}
</style>
